<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<%@ include file="/commons/meta.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>加入我们,初学者论坛,课程发布,BeginCode,beginCode</title>
<!-- Bootstrap -->
<link href="${ctx}/css/bootstrap.css" rel="stylesheet">
 <script src="${ctx}/js/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<style type="text/css">

.bs-callout {
	padding: 20px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px
}

.bs-callout h4 {
	margin-top: 0;
	margin-bottom: 5px
}

.bs-callout p:last-child {
	margin-bottom: 0
}

.bs-callout code {
	border-radius: 3px
}

.bs-callout+.bs-callout {
	margin-top: -5px
}

.bs-callout-danger {
	border-left-color: #d9534f
}

.bs-callout-danger h4 {
	color: #d9534f
}

.bs-callout-warning {
	border-left-color: #f0ad4e
}

.bs-callout-warning h4 {
	color: #f0ad4e
}

.bs-callout-info {
	border-left-color: #5bc0de
}

.bs-callout-info h4 {
	color: #5bc0de
}
.bs-docs-header {
	position: relative;
	padding: 30px 15px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,.1);
	background-color: #3071a9;
	background-repeat: repeat-x;
}

.bs-docs-header {
	margin-bottom: 40px;
	font-size: 20px
}

.bs-docs-header h1 {
	margin-top: 0;
	color: #fff;
}

.bs-docs-header p {
	margin-bottom: 0;
	font-weight: 300;
	line-height: 1.4;
}

.bs-docs-header .container {
	position: relative;
}
.container h1 {
	margin-top: 0;
	color: #fff;
	text-align: left;
	font-weight:bold;
}
.container p {
	text-align: left;
}
.bs-docs-footer {
	margin-top: 0;
	border-top: 0
}

.bs-docs-footer {
	padding-top: 40px;
	padding-bottom: 20px;
	color: #777;
	text-align: center;
	border-top: 1px solid #e5e5e5
}

.bs-docs-footer-links {
	padding-left: 0;
	margin-top: 20px;
	color: #999
}

.bs-docs-footer-links li {
	display: inline;
	padding: 0 2px
}

.bs-docs-footer-links li:first-child {
	padding-left: 0
}

@media (min-width:768px) {
	.bs-docs-footer p {
		margin-bottom: 0;
		text-align: center;
	}
}


</style>
</head>
<body style="background-color: #f8f8f8;">
	<jsp:include  page="top.jsp"/>


 <div class="bs-docs-header" id="content"  style="margin-bottom:20px;">
      <div class="container">
        <h1>加入BeginCode开发社区</h1>
         <p style="text-align: center;">让我们共同为那些努力成为开发者的朋友分享你的经验和知识，让我们一起共同进步</p> 
        
      </div>
    </div>
    
     
	
	<div class="container .col-xs-" >
		<div class="row" >
					<div class="col-md-12" >
							  <div class="panel panel-primary" style="margin-top:0;" >
							  	<div class="panel-body">
							  	<div class="row">
							  		<div class="col-md-8">
					<form>	  		
							   <h3 >用户注册 </h3><div style="color:red;font-size:15px;"></div>
		<hr style="border:none;border-top:1px solid blue; height:0;" />
        <p> 
   <div class="form-group" >
    <label for="email"><span class="labelinfodanger" ></span>电子邮箱</label>
    <input  class="form-control required"    id="email" name="email" placeholder="电子邮箱"   >
  </div>
  
     <div class="form-group">
    <label for="nickname"><span class="labelinfowarn" ></span>昵称</label>
    <input   class="form-control required" id="nickname" name="nickname" placeholder="昵称">
  </div>
     <div class="form-group">
    <label for="pwd" ><span class="labelinfosuccess" ></span>密码</label>
    <input    class="form-control required" id="pwd" type="password" placeholder="输入密码" >
  </div>
     <div class="form-group" >
    <label for="repwd"><span class="labelinfoblue" ></span>确认密码</label>
    <input  class="form-control required" id="repwd" type="password" name="repwd" placeholder="确认密码">
  </div>
  <div class="form-group">
  <label for="sex"><span class="labelinfodanger" ></span>性别</label>
	   <select class="form-control" name="sex" id="sex">
		  <option value="1" >男</option>
		  <option value="0" >女</option>
		</select>  
	</div>
  <div style="margin-top:10px;text-align:center;">
   <button type="button" class="btn btn-primary"  id="send"  style="width:100px;">注册用户</button> 
   </div>
<div style="margin-top:10px;text-align:center;color:red;font-weight:bold;" id="msgInfo">
   </div>
</p>
</form>	
							  		
							  		</div>
							  		<div class="col-md-4">
							  			<h3>为什么要注册</h3>
							  			<p>
							  				1、发布博客、与大家共同分享你的知识
							  			</p>
							  			<p>
							  				2、参与课程学习跟踪课程进展
							  			</p>
							  			<p>
							  				3、获得最新课程，技术的通知
							  			</p>
							  			<p>
							  				4、认识更多的朋友
							  			</p>
							  		</div>
							  	
							  	</div>
	
</div>

							  </div>
							  
 
						    
 
					</div>
					
			 </div>
			

	</div>
	
<jsp:include  page="foot.jsp"/>

	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="${ctx}/js/bootstrap.min.js"></script>
	<script src="${ctx}/js/md5.js"></script>
	<script type="text/javascript">
	$(function(){
	        //如果是必填的，则加红星标识.
			var checkBool = false;
	        $("form :input.required").each(function(){
	            var $required = $("<strong class='hight'>*</strong>"); //创建元素
	            $(this).prev().append($required); //然后将它追加到文档中
	        });
	         //文本框失去焦点后
	        $('form :input').blur(function(){
	             var $parent = $(this).prev();
	             $parent.find(".formtips").remove();
	             //验证用户名
	             if( $(this).is('#nickname') ){
	                    if( this.value=="" || this.value.length < 2 || this.value.length > 25 ){
	                        var errorMsg = '昵称需要2-25汉字之间.';
	                        $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                        $(this).parent().addClass("has-error");
	                       checkBool = true;
	                    }else{
	                    	 $(this).parent().removeClass("has-error");
	                    	 checkBool = false;
	                    }
	             }
	             //验证邮件
	             if( $(this).is('#email') ){
	                if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
	                      var errorMsg = '请输入正确的E-Mail地址.';
	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                      $(this).parent().addClass("has-error");
	                     checkBool = true;
	                }else{
	                	 $(this).parent().removeClass("has-error");
	                	 checkBool = false;
	                }
	             }
	             //验证密码
	             if( $(this).is('#pwd') ){
	                if( this.value=="" ||  this.value.length < 6 || this.value.length > 100 ){
	                      var errorMsg = '密码长度要求在6-100个之间.';
	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                      $(this).parent().addClass("has-error");
	                     checkBool = true;
	                }else{
	                	if($("#repwd").val() !="" && $("#pwd").val() != $("#repwd").val()){
                		  var errorMsg = '两次密码输入不一致.';
 	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
 	                      $(this).parent().addClass("has-error");
 	                     checkBool = true;
                	 }else{
                		 $(this).parent().removeClass("has-error");
                		 checkBool = false;
                	 }
	                	
	                }
	             }
	             //验证邮件
	             if( $(this).is('#repwd') ){
	                if( this.value=="" ||  this.value.length < 6 || this.value.length > 100 ){
	                      var errorMsg = '密码长度要求在6-100个之间.';
	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                      $(this).parent().addClass("has-error");
	                     checkBool = true;
	                }else{
	                	 
	                	if($("#pwd").val() !="" && $("#pwd").val() != $("#repwd").val()){
                		  var errorMsg = '两次密码输入不一致.';
 	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
 	                      $(this).parent().addClass("has-error");
 	                     checkBool = true;
                	 }else{
	                	$(this).parent().removeClass("has-error");
	                	 checkBool = false;
                	 }
	                }
	             }
	        }).keyup(function(){
	           $(this).triggerHandler("blur");
	        }).focus(function(){
	            $(this).triggerHandler("blur");
	        });//end blur

	        
	        //提交，最终验证。
	         $('#send').click(function(){
	                $("form :input.required").trigger('blur');
	                check();
	         });
	        
	         function check(){
	        	 //校验email和nickName是否存在
	        	 jQuery.ajax({
						type:"POST",
					 	url:"${ctx}/user/checkEAndN", 
					 	data:"email="+$("#email").val()+"&nickname="+$("#nickname").val(),
						dataType:"json",
						success:function(data){
								if(data.email =="yes" && data.nickName == "yes"){
									//加密密码
				                	$("#pwd").val(faultylabs.MD5($("#pwd").val()));
				                	$("#repwd").val(faultylabs.MD5($("#repwd").val()));
				                	save();
								}else{
									if(data.email == "no"){
										$("#email").prev().append('<span class="formtips onError hight">email已存在</span>');
									}
									if(data.nickName == "no"){
										$("#nickname").prev().append('<span class="formtips onError hight">昵称已存在</span>');
									}
									return false;
								}
							}
					 	});
	         }
	         function save(){
	        	//校验成功保存
            	 jQuery.ajax({
						type:"POST",
					 	url:"${ctx}/user/addUser", 
					 	data:"email="+$("#email").val()+"&nickname="+$("#nickname").val()+"&pwd="+$("#pwd").val()+"&sex="+$("#sex").val() ,
						dataType:"json",
						success:function(data){
								if(data.msg == "success"){
									window.location.href="${ctx}/home/initBeginCode";
								}else{
									$("#msgInfo").append("注册失败");
									return false;
								}
							}
					 	});
	         }
	})

	</script>
</body>
</html>
